<template>
	<view class="warring-wrap">
		<view class="warring">
			<u-button type="error" text="一键报警" class="custom-style" size="50" @click="warring"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods:{
			warring(){
				console.log("按钮触发");
			}
		}
	}
</script>

<style lang="scss">
	.warring-wrap {
		height: 95vh;
		display: flex;
		align-items: center; // 垂直居中
		justify-content: center; // 水平居中
		position: relative;
		// background-image: linear-gradient(#d3d5c9, #e1ddca, #fee9ce);
		.warring {
			height: 400rpx;
			width: 400rpx;
			position: absolute;
			display: flex;
			align-items: center; // 垂直居中
			justify-content: center; // 水平居中
			background-image: linear-gradient(#ffffff, #fde7d8);
			border-radius: 5%;
			overflow: hidden;
			box-shadow: 10px 10px 11px 4px #c0bdb1;

			.custom-style {
				height: 250rpx;
				width: 250rpx;
				border-radius: 50%;
				overflow: hidden;
				background-image: linear-gradient(#ff897b, #777777);
				border: none;
				font-weight: 600;
				box-shadow: 10px 10px 11px 4px #c0bdb1;
			}
		}
	}
</style>